<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ThinkPHP bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>

<body>
    <!-- 导航 -->
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!-- 导航 -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- 搜索 -->
                <form class="navbar-form navbar-right" action="/search">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="search" value=""
                                required="required" />
                            <span class="input-group-btn"><button type="submit" class="btn btn-default"><i
                                        class="glyphicon glyphicon-search"></i></button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <!-- 面包屑 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Library</a></li>
                    <li class="active">Data</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- 主体 -->
    <div class="container">
        <div class="row">
            <!-- 左侧列表 -->
            <div class="col-md-8">
                <div class="panel panel-default">
                    {block name='archive'}
                    <div class="panel-heading">Panel heading without title</div>
                    {/block}
                    <div class="panel-body">
                        <!-- 列表 -->
                        {block name='list'}
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-sm-3 col-md-3">
                                                <a href="#" class="thumbnail">
                                                    <img style="width:100%;max-height:110px;background-color:#f1f1f1;" src="" alt="...">
                                                </a>
                                            </div>
                                            <div class="col-sm-9 col-md-9">
                                                <h3 style="margin-top: 0;">Thumbnail label</h3>
                                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
                                                    elit non mi porta gravida at eget metus. Nullam id dolor id nibh
                                                    ultricies.</p>
                                                <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/block}
                        <!-- 分页 -->
                        {block name='pages'}
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li>
                                            <a href="#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li>
                                            <a href="#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        {/block}
                    </div>
                </div>
            </div>
            <!-- 右侧侧栏 -->
            <div class="col-md-4">
                {block name='side'}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        <!-- Panel content -->
                        <div class="list-group">
                            <a href="#" class="list-group-item active">Cras justo odio<span class="badge"></span></a>
                            <a href="#" class="list-group-item">Dapibus ac facilisis in<span class="badge"></span></a>
                            <a href="#" class="list-group-item">Morbi leo risus<span class="badge"></span></a>
                            <a href="#" class="list-group-item">Porta ac consectetur ac<span class="badge"></span></a>
                            <a href="#" class="list-group-item">Vestibulum at eros<span class="badge"></span></a>
                        </div>

                    </div>
                </div>
                {/block}
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>&copy 2021 Company, Inc.</p>
            </div>
        </div>
    </div>
</body>

</html>